{extend name="property/public/insidePageBase" /}
{block name="title"}添加能源费用{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">设备名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="energyBill[energy_name]"  autocomplete="off" placeholder="请输入设备名称" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">设备类型</label>
                        <div class="layui-input-block">
                            <select name="energyBill[energy_type]" lay-filter="energy_type" lay-search>
                                <option value="">--请选择--</option>
                                {foreach $energyTypeData as $k=>$v}
                                <option value="{$k}">{$v}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs8">
                    <div class="layui-form-item">
                        <div class="layui-input-group start-end-time">
                            <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;计费周期&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <input type="text" name="start_date" autocomplete="off" id="start_date" class="layui-input" placeholder="开始日期">
                            <div class="layui-input-split layui-input-suffix"> 日 至</div>
                            <input type="text" name="end_date" autocomplete="off" id="end_date" class="layui-input" placeholder="结束日期">
                            <div class="layui-input-split layui-input-suffix"> 止</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;倍 率&nbsp;&nbsp;</div>
                        <input type="text" name="energyBill[beilv]" value="1" autocomplete="off" placeholder="请输入设备倍率" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                        <div class="layui-input-split layui-input-suffix">倍</div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-xs9">
                    <div class="layui-form-item">
                        <label class="layui-form-label">计费方案</label>
                        <div class="layui-input-block" id="energy_plan_data_show"></div>
                    </div>
                </div>
                <div class="layui-col-xs3" >
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid addEnergyPlan"> 添加计费方案 </button>
                </div>
            </div>

            <div id="use_num_show"></div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入费用说明" class="layui-textarea" name="remark"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<script id="bill_cate_data_tpl" type="text/html">
    <input type="text" name="cate_id" id="bill-cate-name" autocomplete="off" class="layui-input">
</script>
<script id="energy_plan_data_tpl" type="text/html">
    <select name="plan_id" lay-filter="plan_id">
        <option value="">请选择方案</option>
        {{# layui.each(d, function(index, item) { }}
        <option value="{{ item.id }}">{{ item.plan_name }}</option>
        {{# }) }}
    </select>
</script>
<script id="use_num_tpl" type="text/html">
    {{# if(d.mode_type == 2) { }}
    <div class="layui-form-item electricity_mode2">
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">上期底数 尖</label>
                    <div class="layui-input-block">
                        <input type="text" name="energyBill[start_num_j]"  autocomplete="off" placeholder="请输入上期底数" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">本期读数 尖</label>
                    <div class="layui-input-block">
                        <input type="text" name="energyBill[end_num_j]"  autocomplete="off" placeholder="请输入本期读数" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">上期底数 峰</label>
                    <div class="layui-input-block">
                        <input type="text" name="energyBill[start_num_f]"  autocomplete="off" placeholder="请输入上期底数" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">本期读数 峰</label>
                    <div class="layui-input-block">
                        <input type="text" name="energyBill[end_num_f]"  autocomplete="off" placeholder="请输入本期读数" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">上期底数 平</label>
                    <div class="layui-input-block">
                        <input type="text" name="energyBill[start_num_p]"  autocomplete="off" placeholder="请输入上期底数" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">本期读数 平</label>
                    <div class="layui-input-block">
                        <input type="text" name="energyBill[end_num_p]"  autocomplete="off" placeholder="请输入本期读数" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">上期底数 谷</label>
                    <div class="layui-input-block">
                        <input type="text" name="energyBill[start_num_g]"  autocomplete="off" placeholder="请输入上期底数" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">本期读数 谷</label>
                    <div class="layui-input-block">
                        <input type="text" name="energyBill[end_num_g]"  autocomplete="off" placeholder="请输入本期读数" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{# } else { }}
    <div class="layui-row electricity_mode1">
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">上期底数</label>
                <div class="layui-input-block">
                    <input type="text" name="energyBill[start_num_z]"  autocomplete="off" placeholder="请输入上期底数" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">本期读数</label>
                <div class="layui-input-block">
                    <input type="text" name="energyBill[end_num_z]"  autocomplete="off" placeholder="请输入本期读数" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                </div>
            </div>
        </div>
    </div>

    {{# } }}
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer', 'laydate', 'layCascader','laytpl'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,laydate = layui.laydate, laytpl = layui.laytpl,layCascader = layui.layCascader;
        laydate.render({
            elem: '.start-end-time'
            ,range: ['#start_date', '#end_date']
        });

        function loadEnergyPlanData() {
            let energy_type = $('select[name="energy_type"]').val()
            $.get("{:request()->url()}", {get_type: 'getEnergyPlanData', energy_type: energy_type}, function(res) {
                if(res.code !== 0) {
                    return layer.msg(res.msg)
                }
                var getTpl = document.getElementById('energy_plan_data_tpl').innerHTML; // 获取模板字符
                var elemView = document.getElementById('energy_plan_data_show'); // 视图对象
                // 渲染并输出结果
                laytpl(getTpl).render(res.data, function(str){
                    elemView.innerHTML = str;
                    form.render()
                    loadShowUseNumTpl()
                });
            })
        }
        loadEnergyPlanData()

        form.on('select(energy_type)', function(elem) {
            loadEnergyPlanData()
        });

        form.on('select(plan_id)', function(elem) {
            loadShowUseNumTpl()
        });

        function loadShowUseNumTpl() {
            let planId = $('select[name="plan_id"]').val()
            var loadIndex = layer.load(0, {time: 0});
            $.get("{:request()->url()}", {get_type: 'getEnergyPlanInfo',plan_id: planId}, function(res) {
                layer.close(loadIndex)
                if(res.code !== 0) {
                    return layer.msg(res.msg)
                }
                var getTpl = document.getElementById('use_num_tpl').innerHTML; // 获取模板字符
                var elemView = document.getElementById('use_num_show'); // 视图对象
                // 渲染并输出结果
                laytpl(getTpl).render(res.data, function(str){
                    elemView.innerHTML = str;
                    form.render()
                });
            })
        }

        $('.addEnergyPlan').on('click', function() {
            var url = '{:url("propertyEnergyPlanAdd")}';
            var index = parent.layer.open({title: '添加方案',type: 2,shade: 0.2, maxmin:true,area: ['600px', '450px'], content: url, btnAlign: 'c' , btn: ['确定', '取消'] , yes: function (index, layero) {
                    var iframeWindow = parent.window['layui-layer-iframe' + index] , submit = layero.find('iframe').contents().find("#submitBtn");
                    iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                        var field = data.field; //获取提交的字段
                        var loadAdd = parent.layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                        $.post(url, field, function (res) {
                            parent.layer.close(loadAdd);
                            if (res.code === 0) {
                                loadEnergyPlanData()
                                parent.layer.close(index); //关闭弹层
                                parent.layer.msg(res.msg, {icon: 6, offset: '15px'});
                            } else {
                                parent.layer.msg(res.msg, {icon: 5, offset: '15px'});
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });

    });
</script>
{/block}